import { defineConfig } from 'vite-plugin-windicss'
import plugin from 'windicss/plugin'
import scrollSnapPlugin from 'windicss/plugin/scroll-snap'
import theme from './themeExtend'

const themeExtend = theme()

// const themeExtend = {
//     fontSize: {
//         xs: '10px',
//         sm: '12px',
//         base: '14px',
//         lg: '16px',
//         xl: '20px',
//         xxl: '24px',
//         xxll:'28px',
//         xxxl: '32px'
//     },
//     width: {
//         screen: '100vw',
//         full: '100%',
//         10: '10px',
//         14: '14px',
//         24: '24px',
//         30: '30px',
//         32: '32px',
//         40: '40px',
//         46: '46px',
//         48: '48px',
//         56: '56px',
//         64: '64px',
//         84: '84px',
//         132: '132px',
//         144: '144px',
//         198: '198px',
//         200: '200px',
//         300: '300px',
//         900: '900px',
//         1440: '1440px',
//         1920: '1920px'
//     },
//     height: {
//         screen: '100vh',
//         full: '100%',
//         14: '14px',
//         24: '24px',
//         30: '30px',
//         32: '32px',
//         38: '38px',
//         40: '40px',
//         44: '44px',
//         48: '48px',
//         56: '56px',
//         60: '60px',
//         64: '64px',
//         84: '84px',
//         132: '132px'
//     },
//     colors: {
//         blue: {
//             100: '#3E5FF5',
//             200: '#9EAFFA',
//             300: '#EBEFFE'
//         },
//         fill: '#FAFAFC',
//         white: '#FFFFFF',
//         'white-100': '#FFFFFF',
//         'white-200': '#FFFFFF75',
//         'white-300': '#FFFFFF10',
//         green: '#00D679',
//         'green-light': '#EBFFF8',
//         yellow: '#FEDB38',
//         error: '#FF7E68',
//         red: '#FF7E68',
//         'red-dark-100': '#DC1515',
//         'red-light-100': '#FFF1F0',
//         'red-light-200': '#FFDCD8',
//         black: {
//             100: '#202536',
//             200: '#565868',
//             300: '#9497B1',
//             400: '#F4F4F7',
//             500: '#BAC0CF',
//         }
//     },
//     margin: {
//         4: '4px',
//         6: '6px',
//         8: '8px',
//         10: '10px',
//         12: '12px',
//         14: '14px',
//         16: '16px',
//         24: '24px',
//         32: '32px',
//         40: '40px'
//     },
//     spacing: {
//         4: '4px',
//         6: '6px',
//         8: '8px',
//         10: '10px',
//         12: '12px',
//         14: '14px',
//         16: '16px',
//         20: '20px',
//         24: '24px',
//         32: '32px',
//         60: '60px',
//         72: '72px',
//     },
//     space: {
//         4: '4px',
//         6: '6px',
//         8: '8px',
//         12: '12px',
//         16: '16px',
//         24: '24px',
//         32: '32px',
//         40: '40px'
//     },
//     border: {
//         primary: '#2F6DF5',
//         color: {
//             100: '#FAFAFC',
//             200: '#F0F2F9',
//             300: '#C4C6CE'
//         }
//     },
//     borderRadius: {
//         sm: '4px',
//         base: '8px',
//         default: '8px',
//         lg: '12px',
//         xl: '20px',
//         full: '9999px'
//     },
//     boxShadow: {
//         sm: '0px 12px 16px 0px rgba(225, 230, 238, 0.6)',
//         base: '0px 12px 32px 0px rgba(225, 230, 238, 0.7)',
//         lg: '0px 12px 64px 0px rgba(225, 230, 238, 0.8)',
//         menu: '0px 0px 24px 0px rgba(0, 0, 0, 0.06)'
//     },
//     transitionProperty: {
//         'border': 'border',
//     },
// }

export default defineConfig({
    theme: {
        extend: themeExtend
    },
    // extract: {
    //     include: ['./**/*.tsx']
    // },
    // 产品-添加标签-标签的背景颜色
    safelist: ['text-green', 'text-yellow', 'text-orange', 'bg-red', 'bg-yellow', 'bg-green', 'bg-gray-100', 'bg-cyan','bg-blue-200', 'border-t-color-blue-100', 'border-t-color-blue-300', 'bg-blue-200', 'bg-orange', 'bg-black-300'],
    plugins: [
        scrollSnapPlugin,
        plugin(({ addBase, addUtilities }) => {
            // 通过变量覆盖vxe、element的默认配置样式
            const none = 'none'
            const transparent = 'transparent'
            const defaultTextColor = themeExtend.colors.black[100]
            const borderColor = themeExtend.border.color[300]
            const primary = themeExtend.colors.blue[100]
            const borderRadius = themeExtend.borderRadius.default
            const borderRadiusSm = themeExtend.borderRadius.sm
            const FillColor = themeExtend.colors.fill
            const coverStyle = {
                body: {
                    padding: 0,
                    margin: '0 !important',
                    color: defaultTextColor,
                    fontSize: themeExtend.fontSize.base,
                    // vxetable
                    '--vxe-font-color': `${defaultTextColor}`,
                    '--vxe-table-header-background-color': `${FillColor}`,
                    '--vxe-primary-color': primary,
                },
                'body .vxe-pager': {
                    '--vxe-pager-perfect-button-background-color': transparent,
                    '--vxe-border-radius': '100px',
                    '--vxe-table-border-color': transparent
                },
                'body .vxe-pager button.vxe-pager--num-btn, body .vxe-pager button.vxe-pager--next-btn, body .vxe-pager button .vxe-pager--prev-btn': {
                    'border-radius': '100px !important'
                },
                '.ant-tabs, .ant-tabs-content, .ant-tabs-content-holder': {
                    height: '100%',
                },
                '.ant-menu-root': {
                    'border-inline-end': 'none !important'
                },
                'html[data-vxe-ui-theme="light"]': {
                    '--vxe-ui-font-color': defaultTextColor,
                    '--vxe-ui-font-primary-color': primary
                }
            }

            const globalStyle = {
                '.page-title': {
                    fontSize: themeExtend.fontSize.lg,
                    fontWeight: 'bold',
                    borderBottom: `1px solid ${themeExtend.border.color[100]}`,
                    padding: themeExtend.spacing[20]
                },
                '.important': {
                    color: 'red',
                    '&::after': {
                        display: 'inline-block',
                        color: 'var(--el-color-danger)',
                        content: '*',
                        'margin-left': '4px'
                    }
                }
            }
            addBase({
                ...coverStyle,
                body: {
                    ...coverStyle?.body??{},
                    ...globalStyle
                }
            })
            addUtilities({
                body: globalStyle
            })
        })
    ]
})
